<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card>
        <el-row type="flex" justify="">
          <el-col>
            <el-button size="small" type="primary" @click="show">
              添加分类
            </el-button>
          </el-col>

          <el-row type="flex" justify="end">
            <el-input
              v-model="pageConsige.title_contains"
              placeholder="请输入关键字"
            />
          </el-row>
          <el-button
            size="small"
            icon="el-icon-search"
            @click="serch"
          />
        </el-row>

        <hr>
        <el-table
          :data="tableData"
          border
          style="width: 100%"
        >
          <el-table-column
            prop="image"
            label="图片"
            width="180"
          >
            <template #default="{row}">
              <img :src="row.image" style="width:160px; height:100px">
            </template>

          </el-table-column>

          <el-table-column
            prop="title"
            label="标题"
            width="180"
          />
          <el-table-column
            prop="desc"
            label="介绍"
          />

          <el-table-column label="操作" fixed="right" width="280">
            <template #default="{row}">
              <el-button type="primary" size="small" @click="edit(row.id)">编辑</el-button>
              <el-button type="danger" size="small" @click="del(row.id)">删除</el-button>

            </template></el-table-column></el-table>

        <!-- 分页组件 -->
        <el-row type="flex" justify="center" align="middle">
          <el-pagination
            layout="prev, pager, next"
            :page-size="pageConsige._limit"
            :total="total"
            :current-page="curPag"
            @current-change="currentChange"
          />
        </el-row>
        <!-- 弹窗组件 -->
        <Addclassify ref="fordata" :is-show-dialog.sync="isShowDialog" @updata="getCategories" @close="CategoryCount" @show="getCategories" />
      </el-card>

    </div>
  </div>
</template>

<script>
import Addclassify from './components/add-classify.vue'
import { delCategories, getCategories, CategoryCount } from '@/api/category'
export default {
  components: { Addclassify },
  data() {
    return {
      tableData: [],
      isShowDialog: false,
      pageConsige: {
        _limit: 2, // 每页显示条数
        _start: 0, // 总页码
        title_contains: '' // 模糊查询的数据
      },
      total: 0,
      curPag: 1
    }
  },
  created() {
    this.getCategories()
    this.CategoryCount()
  },
  methods: {
    async edit(id) {
      this.userid = id
      console.log(88, this.userid)
      // 数据回显
      // this.formData = getCategories(id)
      console.log(id)
      this.isShowDialog = true
      await this.$refs.fordata.DetailById(id)
    },
    async del(id) {
      // 2次询问
      await this.$confirm('确定删除吗')
      // 发送请求
      await delCategories(id)
      // 提醒用户
      this.$message.success('删除成功')
      // 减少页码
      this.CategoryCount()

      if (this.tableData.length === 1 && this.pageConsige._limit > 1) {
        this.pageConsige._start = 0
        this.curPag--
      }
      // 更新页面
      this.getCategories()
    },
    show() {
      this.isShowDialog = true
    },
    async getCategories() {
      const { data } = await getCategories(this.pageConsige)
      this.tableData = data
    },
    // 显示分页
    async CategoryCount() {
      const { data } = await CategoryCount(this.pageConsige)
      console.log(data)
      this.total = data
    },
    // 翻页
    currentChange(newPage) {
      this.pageConsige._start = this.pageConsige._limit * (newPage - 1)
      this.getCategories()
      this.CategoryCount()
    },

    // 搜索
    serch() {
      this.pageConsige._start = 0
      this.curPag--
      this.getCategories()
      this.CategoryCount(this.pageConsige.title_contains)
    }
  }
}

</script>

<style scoped>
    hr {
      margin: 20px 0;
    }
    .el-pagination {
      margin: 30px;
    }
    .el-input{
      width: 300px;

    }

</style>
